<template>
  <div class="cfCard">
    <header class="flex-between">
      <div class="cfName flex-start">
        <span>{{cf_name}}</span>
        <img v-if="cf_lock" src="@/assets/conference/lock.png" alt="" class="lock" />
      </div>
      <div class="operation flex-start">
        <img class="cp" src="@/assets/conference/editCf.png" alt="" @click="editCf" v-if="tools.isSelf(cf_sponsor)"/>
        <img class="cp" src="@/assets/conference/deleteCf.png" alt="" @click="cancelCf" v-if="tools.isSelf(cf_sponsor)" />
      </div>
    </header>
    <main @click="showDesc">
      <section class="time flex-between">
        <div class="startTime">
          <div class="timeTick">{{getTime(cf_start_time,'HH:mm')}}</div>
          <div class="date">{{getTime(cf_start_time,'yyyy-MM-DD')}}</div>
        </div>
        <div class="state" :class="stateData.stateClass">
          <span>{{stateData.stateName}}</span>
        </div>
        <div class="endTime">
          <div class="timeTick">{{getTime(cf_end_time,'HH:mm')}}</div>
          <div class="date">{{getTime(cf_end_time,'yyyy-MM-DD')}}</div>
        </div>
      </section>
      <section class="flex-between">
        <span>会议号：{{cf_code}}</span>
        <span>主持人：{{cf_host_name}}</span>
      </section>
      <section class="flex-between">
        <span>计划参会人：{{cf_plan_participant_number}}人</span>
        <!-- <span>复制邀请链接</span> -->
        <span></span>
      </section>
    </main>
    <footer class="flex-center">
      <span :class="ifCanJoinCf ? '' : 'disable'" @click="joinCf">进入会议</span>
    </footer>
  <cf-drawer :cf_id="cf_id"  :type="'agenda'" :title="cf_name" :ifShow="showCfDrawer" @closeDrawer="closeDrawer"></cf-drawer>
    <min-dialog-box v-if="cancelCfId" :dialogData="dialogData" @sureBtnEvent="sureBtnEvent" @cancelBtnEvent="cancelBtnEvent"></min-dialog-box>
  </div>
</template>

<script>
import moment from 'moment'
import cfDrawer from '../../cfDrawer'
import { sendSock } from '../../../../../utils/socketSend'
export default {
  components: {
    cfDrawer
  },
  props: {
    // 会议号
    cf_code: String,
    // 结束时间
    cf_end_time: String,
    // 主持人名字
    cf_host_name: String,
    // 会议id
    cf_id: Number,
    // 是否锁定
    cf_lock: Boolean,
    // 会议名称
    cf_name: String,
    // 开始时间
    cf_start_time: String,
    // 会议状态
    cf_state: Number,
    // 计划参与人数量
    cf_plan_participant_number: Number,
    // 会议发起人
    cf_sponsor: Number
  },
  data () {
    return {
      showCfDrawer: false, // 展示会议详情抽屉
      cancelCfId: null
    }
  },
  computed: {
    // 是否可加入会议
    ifCanJoinCf () {
      return +new Date() - +new Date(this.cf_start_time) >= -900000
    },
    // 取消会议弹窗dialogData
    dialogData () {
      return {
        mainTips: [`确定取消会议"${this.cf_name}"吗`],
        btnList: [
          {
            name: '确定',
            color: 'blue',
            type: 'sure'
          },
          {
            name: '取消',
            color: 'white',
            type: 'cancel'
          }
        ]
      }
    },
    // 会议状态
    stateData () {
      let className = ''
      let stateName = ''
      switch (this.cf_state) {
        case 0:
          className = 'before'
          stateName = '待开始'
          break
        case 1: {
          className = 'meeting'
          stateName = '正在进行'
        }
      }
      return {
        stateClass: className,
        stateName
      }
    }
  },
  methods: {
    getTime (time, format) {
      return moment(time).format(format)
    },
    editCf () {
      this.$store.dispatch('conference/getCfDetail', this.cf_id).then(res => {
        if (res.data && res.data.code === 200) {
          res.data.data.cf_start_time = moment(+new Date(res.data.data.cf_start_time) - new Date().getTimezoneOffset() * 60000).format('YYYY-MM-DD HH:mm:ss')
          res.data.data.cf_end_time = moment(+new Date(res.data.data.cf_end_time) - new Date().getTimezoneOffset() * 60000).format('YYYY-MM-DD HH:mm:ss')
          this.$store.commit('conference/set_agendaEditData', res.data.data)
          // this.$store.commit('conference/set_cfDrawerData', res.data.data)
        }
      })
      this.$router.push('/conference/agendaCf/edit')
    },
    // 取消会议
    cancelCf () {
      this.cancelCfId = this.cf_id
    },
    // 确认取消会议
    sureBtnEvent () {
      this.$store.dispatch('conference/deleteCf', this.cancelCfId).then(res => {
        if (res.data && res.data.code === 200) {
          this.$store.dispatch('conference/getToDoMeetingList')
        } else {
          this.$message.error(res.data.message)
        }
      })
      this.cancelCfId = null
    },
    // 取消取消会议
    cancelBtnEvent () {
      this.cancelCfId = null
    },
    // 加入会议
    joinCf () {
      if (this.ifCanJoinCf) {
        // 将当前设置继承给当前会议
        const settings = JSON.parse(JSON.stringify(this.$store.state.user.generalSettings))
        this.$store.commit('conferenceRoom/set_conferenceSettings', settings)
        sendSock({
          type: '4.1.1',
          body: {
            voiced: settings.voiced,
            camera: settings.camera,
            cf_join_type: 1,
            cf_id: this.cf_code + ''
          }
        })
        this.$store.commit('socket/set_operationReqId', 'joinConferenceReqId')
      } else {
        this.$message.info('会议开始前15分钟方可入会')
      }
    },
    // 显示详情
    showDesc () {
      this.$store.commit('conference/set_drawerId', this.cf_id)
      this.$store.dispatch('conference/getCfDetail', this.cf_id).then(res => {
        if (res.data && res.data.code === 200) {
          res.data.data.cf_start_time = moment(+new Date(res.data.data.cf_start_time) - new Date().getTimezoneOffset() * 60000).format('YYYY-MM-DD HH:mm:ss')
          res.data.data.cf_end_time = moment(+new Date(res.data.data.cf_end_time) - new Date().getTimezoneOffset() * 60000).format('YYYY-MM-DD HH:mm:ss')
          res.data.data.cf_participants = res.data.data.plan_participant
          this.$store.commit('conference/set_cfDrawerData', res.data.data)
          this.showCfDrawer = true
        }
      })
    },
    closeDrawer () {
      this.showCfDrawer = false
    }
  }
}
</script>

<style lang="scss" scoped>
.cfCard {
  width: 352px;
  height: 245px;
  opacity: 1;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 24px 0px #ebedf3;
  header {
    padding: 16px;
    border-bottom: 1px solid #ebedf3;
    .cfName {
      span {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #0D172C;
        line-height: 20px;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
    .operation {
      img {
        margin-left: 12px;
        width: 20px;
        height: 20px;
      }
    }
  }
  main {
    padding: 0 16px 5px;
    section{
      margin-bottom: 12px;
      &:first-child{
        margin-bottom: 0;
      }
      span{
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #2e3f64;
        line-height: 17px;
      }
    }
    section.time {
      height: 78px;
      padding: 0 16px;
      .startTime,
      .endTime {
        min-width: 92px;
      }
      .timeTick {
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #0D172C;
        line-height: 25px;
      }
      .date {
        margin-top: 4px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #9eaac4;
        line-height: 17px;
      }
      .state {
        width: 48px;
        height: 18px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        position: relative;
        span {
          border-radius: 4px;
          width: 96px;
          height: 36px;
          color: #ffffff;
          position: absolute;
          font-size: 20px;
          left: 50%;
          top: 50%;
          text-align: center;
          line-height: 36px;
          transform: translate(-50%, -50%) scale(0.5);
        }
      }
      .state.over {
        background: #9eaac4;
      }
      .state.meeting{
        background: #1AC47C;
      }
      .state.before{
        background: #FFB000;
      }
    }
  }
  footer{
    height: 51px;
    border-top: 1px solid #ebedf3;
    span{
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #304eec;
      line-height: 20px;
      letter-spacing: 0px;
    }

    .disable {
      color: #9EAAC4;
    }
  }
}
</style>
